<template>
  <el-container class="userlog height100   domainMainContent containerHeight" >
      <el-main class="el-mainContent height100 overflowYHidden"  v-show="showmode=='LIST'"  direction="vertical" ref="userLogMain">
        <header_item  :headerArr="headerArr"  @onBtnClick="onBtnClick" :multipleSelection="multipleSelection"/>
        <div class="containerContentHeight">
          <el-row ref="search">
            <search_item :searchItemArr="searchItemArr" @searchItemData="searchItemData"/>
          </el-row>
        <template v-if="!isOpen">
          <el-row class="paddingB18" ref="isshowlog">
            <el-col>
              <span class="userlog-record">{{$t('userlog_record')}}</span>
              <el-radio v-model="isLog" label="true">是</el-radio>
              <el-radio v-model="isLog" label="false">否</el-radio>
            </el-col>
          </el-row>
        </template>
        <!-- 操作日志列表 -->
      <table_item ref="tableItem" :tableArr="tableArr" :tableListConHeight="tableListConHeight" @onRowClick="onRowClick"  @changeMulSelection="changeMulSelection"/>
        <!-- 分页 -->
       <el-row ref="pagination">
        <pagination_item  :pagniArr="logdata" :pagniObj="searchdata" @searchPagniItem="searchPagniItem"/>
       </el-row>
        </div>
      </el-main>
    <el-container v-show="showmode=='DETAIL'">
      <userlog_detail :detail="content" @exit="onExit"/>
    </el-container>
    
  </el-container>
</template>

<script>
import userlog_detail from "@/components/userlog_detail.vue";
import { pxToRemScale } from '../utils'
export default {
  components:{
    userlog_detail,
  },
  created() {
    this.searchTableData()
    this.$api.getUserLogIslog(this.$route.query.domainid,
      {
        onSucess: resp => {
          this.isLog = resp.data.data;
        }
      }
    );
  //安全保密员 isSecret 安全审计员 isExamine
    if(this.$store.state.currentUser.isOpenSecurity) {
      this.isOpen = true
      if (this.$store.state.currentUser.type == 'examine') {
        this.isExamine = true;//是否是系统管理员
      }else if (this.$store.state.currentUser.type == 'secret') {
        this.isSecret= true;//是否是系统管理员
      }
    }
    //关于标题的处理
    if(this.$store.state.currentUser && this.$store.state.currentUser.isOpenSecurity) {
      this.headerArr={iconfont:'icon-icon_czrz_off',content:this.$t('log'),btnArr:[] }
    }else {
      this.headerArr={iconfont:'icon-icon_czrz_off',content:this.$t('log'),btnArr:[{type:'primary',name:'save',label:this.$t('save')},{name:'export',label:this.$t('exportAll')},{type:'danger',name:'del',label:this.$t('del'),isShow:(this.isSecret || this.isExamine)}] }
    }
    //在这里对传过去的参数赋值
    this.searchItemArr=[
        {type:'input',name:'operator',placeholder:this.$t('operator')},
        {type:'input',name:'type',placeholder:'类型'},
        {type:'input',name:'description',placeholder:'描述'},
        {type:'input',name:'ip',placeholder:'IP'},
        {type:'date',name:'startDate',placeholder:'开始日期'},
        {type:'date',name:'endDate',placeholder:'结束日期'},
        {type:'select',name:'result',placeholder:'操作结果',arr:this.resultArr},
       ]
 },
  mounted(){
    let temp=pxToRemScale((this.$refs.isshowlog ? this.$refs.isshowlog.$el.getClientRects()[0].height : 0)+this.$refs.search.$el.getClientRects()[0].height+this.$refs.pagination.$el.getClientRects()[0].height)
    this.tableListConHeight=`calc(100% - ${temp}rem)`;
  },
  data() {
    return {
      showmode:"LIST",
      logdata: {},
      searchdata:{
        currpage: 1,
        pagelines: 10,
        data:{
          operator:"",
          ip:"",
          date:"",
        }
      },
      params:{
        operator:'',
        date:'',
        ip:''
      },
      multipleTable:[],
      multipleSelection:[],
      isLog:"true",
      userDetailVisible:false,
      content:{},
      tableListConHeight:null,
      isExamine:false,//安全审计员
      isSecret:false,//安全保密员
      isOpen:false,//开关是否开启
      searchItemArr:[],
      headerArr:{},
      tableArr:{
        tableColumns:[
              {prop:'operator',label:this.$t('operator'),width:160},
              {prop:'type',label:this.$t('type'),width:70},
              {prop:'description',label:this.$t('description')},
              {prop:'date',label:this.$t('date'),width:160},
              {prop:'ip',label:'IP',width:160},
              {prop:'result',label:this.$t('log_result'),width:100},
             ]
      },
      resultArr:[
        { labe: "", value: "" },
        { label: "成功", value: "成功" },
        { label: "失败", value: "失败" },
      ],
    };
  },
  methods:{
    exportExcel(){
      this.$api.exportExcelLog(this.$route.query.domainid, this.params,
      () => {
        this.$message({
          showClose: true,
          message: this.$t("export_success"),
          type: "success"
        });
      })
    },
    onSaveBtnClick(){
      let isLogs={
        "isLog":this.isLog
      }
      this.$api.updateUserLogs(this.$route.query.domainid,
        isLogs
      ,{
        onSucess:resp =>{
          if(resp.data.errcode==0){
            this.$message({
                showClose: true,
                message: this.$t('msg_save_success'),
                type: "success"
              });
          }else{
            this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "error"
              });
          }
        },
        onError:function(){

        }
      })
    },
    onBtnClick(name){
      if(name=='save'){this.onSaveBtnClick()}
      else if(name=='del'){this.onDeleteBtnClick()}
      else if(name=='export'){this.exportExcel()}
    },
     onDeleteBtnClick(){
        this.$api.deleteLogdata(this.$route.query.domainid,{
          data:this.multipleSelection
        },{
          onSucess:resp =>{
            if(resp.data.errcode==0){
              this.$refs.tableItem.clearSelection()//手动清除
              this.$message({
                  showClose: true,
                  message: this.$t('msg_del_success'),
                  type: "success"
                });
              this.searchTableData()
            }else{
              this.$message({
                  showClose: true,
                  message: resp.data.errmsg,
                  type: "error"
                });
            }
          },
          onError:function(){

          }
        })
    },
    searchItemData(val){
      this.searchdata={
        ...this.searchdata,
        data:{
          ...val
        }
      }
      this.queryData()
    },
    changeMulSelection(val){
      if(val){
        this.multipleSelection=val
      }
    },
    queryData(){
      this.params={
        ...this.searchdata.data
      }
      this.searchTableData();
    },
    searchPagniItem(val){
      this.searchdata={
        ...this.searchdata,
        ...val,
      }
      this.searchTableData()
    },
    searchTableData(){
      this.$api.getUserLogs(
        { domainid: this.$route.query.domainid,currpage: this.searchdata.currpage, pagelines: this.searchdata.pagelines,data:{ ...this.searchdata.data }},
        {
          onSucess: resp => {
            this.logdata = resp.data.data;
            this.logdata.datas.forEach((elm)=>{
              elm.date=this.resolvingDate(elm.date);
            })
            //这里对table的传值赋值
            this.tableArr={
              ...this.tableArr,
              ...this.logdata,
            }
            this.$set(this.searchdata,'currpage',this.tableArr.pageNo)
            this.$refs.tableItem.cancelInterval()
          }
        }
      );
    },

    onRowClick(row) {
      this.showDetail(row);
    },
    showDetail(dept) {
      this.content = dept;
      this.showmode = "DETAIL";
    },
    
    onExit(){
      this.showmode = 'LIST';
      this.searchTableData();
    },
    resolvingDate(date){
      let d = new Date(date);

      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

      let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;

      return times
    }
  }

};
</script>

<style>
</style>